{% extends "stocksys/base/base_page.html" %}
{% load staticfiles %}
{% block headscript %}
    {% include "stocksys/base/codemirror_core.html" %}
    <style type="text/css">
        .CodeMirror {
            border: 1px solid #eee;
            min-height: 600px;
            width: 100%;
        }
    </style>

{% endblock %}
{% block content %}
    <div class="content buttons-with-margin">
        <div class="header text-center">
            <h3 class="title text-warning">按Ctrl+S保存文件</h3>
        </div>
        <div class="row">
            <div class="select col-md-4">
                <select class="form-control" onchange="selectTheme()" id=select>
                    <option selected>idea</option>
                    <option>3024-day</option>
                    <option>default</option>
                    <option>3024-night</option>
                    <option>abcdef</option>
                    <option>ambiance</option>
                    <option>base16-dark</option>
                    <option>base16-light</option>
                    <option>bespin</option>
                    <option>blackboard</option>
                    <option>cobalt</option>
                    <option>colorforth</option>
                    <option>darcula</option>
                    <option>dracula</option>
                    <option>duotone-dark</option>
                    <option>duotone-light</option>
                    <option>eclipse</option>
                    <option>elegant</option>
                    <option>erlang-dark</option>
                    <option>gruvbox-dark</option>
                    <option>hopscotch</option>
                    <option>icecoder</option>
                    <option>idea</option>
                    <option>isotope</option>
                    <option>lesser-dark</option>
                    <option>liquibyte</option>
                    <option>lucario</option>
                    <option>material</option>
                    <option>material-darker</option>
                    <option>material-palenight</option>
                    <option>material-ocean</option>
                    <option>mbo</option>
                    <option>mdn-like</option>
                    <option>midnight</option>
                    <option>monokai</option>
                    <option>moxer</option>
                    <option>neat</option>
                    <option>neo</option>
                    <option>night</option>
                    <option>nord</option>
                    <option>oceanic-next</option>
                    <option>panda-syntax</option>
                    <option>paraiso-dark</option>
                    <option>paraiso-light</option>
                    <option>pastel-on-dark</option>
                    <option>railscasts</option>
                    <option>rubyblue</option>
                    <option>seti</option>
                    <option>shadowfox</option>
                    <option>solarized dark</option>
                    <option>solarized light</option>
                    <option>the-matrix</option>
                    <option>tomorrow-night-bright</option>
                    <option>tomorrow-night-eighties</option>
                    <option>ttcn</option>
                    <option>twilight</option>
                    <option>vibrant-ink</option>
                    <option>xq-dark</option>
                    <option>xq-light</option>
                    <option>yeti</option>
                    <option>yonce</option>
                    <option>zenburn</option>
                </select>
            </div>
            <div class="select col-md-4">
                最近更新时间：{{ update_time | date:"Y-m-d H:m:s" }}
            </div>

        </div>
        <div class="row">
            <div id="python_code_content" class="col-md-10">
                <textarea id="python_code" style="resize: none;">{{ code_content }}</textarea>
            </div>
            <div class="content" id="operation_button">
                <div class=" col-md-2">
                    <div onclick="coder_saver()" class="btn btn-fill btn-wd ">保存代码</div>
                </div>
                <div class=" col-md-2">
                    <div class="btn btn-fill btn-wd ">启动回测</div>
                </div>
            </div>
        </div>
        <div class="row">

        </div>
    </div>
{% endblock %}


{% block pagescript %}

    <script>
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        var te_python = document.getElementById("python_code");
        var python_editor = CodeMirror.fromTextArea(te_python, {
            mode: "python",
            lineNumbers: true,
            extraKeys: {
                "Ctrl-Q": function (cm) {
                    cm.foldCode(cm.getCursor());
                },
                "Ctrl-S": function (cm) {
                    cm.save();
                    console.log(cm.getValue());
                    $.ajax({
                        url: "{% url 'stocksys:code_editor' id=model_id %}",
                        dataType: "json",
                        data: {
                            'csrfmiddlewaretoken': csrf,
                            'code': $("#python_code").val(),
                        },
                        method: "POST",
                        success: function (data) {
                            swal({
                                title: "Saved File",
                                text: "You Saved File",
                                buttonsStyling: false,
                                confirmButtonClass: "btn btn-success",
                                type: "success"
                            }).catch(swal.noop);
                        }
                    });
                },
                "F11": function (cm) {
                    if ($("#operation_button").is(":hidden")) {
                        $("#python_code_content").removeClass("swal2-container").addClass("col-md-10").css({
                            'overflow': 'auto',
                            'width': 'auto'
                        });
                        $(".CodeMirror").css({'width': '100%', 'min-height': "600px", "height": ""});
                        $("#operation_button").show();
                    } else {
                        $("#python_code_content").removeClass("col-md-10").addClass("swal2-container").css({
                            'overflow': 'scroll',
                            'width': '100%'
                        });
                        $(".CodeMirror").css({'width': '100%', 'min-height': "none", "height": "100%"});
                        $("#operation_button").hide();
                    }
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            },
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
        var coder_saver = function save_code() {
            python_editor.save();
            $.ajax({
                url: "{% url 'stocksys:code_editor' id=model_id %}",
                dataType: "json",
                headers: {'X-CSRFToken': $.cookie('csrftoken')},
                data: {
                    'code': python_editor.getValue(),
                },
                method: "POST",
                success: function (data) {
                    swal({
                        title: "Saved File",
                        text: "You Saved File",
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-success",
                        type: "success"
                    }).catch(swal.noop);
                }
            });
        }
        var input = document.getElementById("select");

        function selectTheme() {
            var theme = input.options[input.selectedIndex].textContent;
            python_editor.setOption("theme", theme);
            location.hash = "#" + theme;
        }

        var choice = (location.hash && location.hash.slice(1)) ||
            (document.location.search &&
                decodeURIComponent(document.location.search.slice(1)));
        if (choice) {
            input.value = choice;
            python_editor.setOption("theme", choice);
        }
        CodeMirror.on(window, "hashchange", function () {
            var theme = location.hash.slice(1);
            if (theme) {
                input.value = theme;
                selectTheme();
            }
        });
    </script>
    </div>
{% endblock %}

